<div id="database-settings-view" class="flex-vertical absolute-fill">
    <!-- ko if: isForbidden-->
    <div class="text-center">
        <h4 class="page-header text-info">You are not authorized to view this page!</h4>
    </div>
    <!-- /ko -->
    <!-- ko if: !isForbidden() -->
    <div class="flex-horizontal flex-wrap margin-top margin-left margin-bottom"">
        <div class="filter-entries">
            <input class="form-control" placeholder="Filter Keys" data-bind="textInput: filterKeys" />
        </div>
        <div class="btn-group">
            <button class="btn btn-primary" data-bind="visible: viewMode() === 'editMode', click: save, enable: isSaveEnabled, css: { 'btn-spinner': spinners.save }">
                <i class="icon-save"></i><span>Save</span>
            </button>
            <button class="btn btn-default" data-bind="visible: viewMode() === 'editMode', click: cancelEdit">
                <i class="icon-cancel"></i><span>Cancel</span>
            </button>
            <button class="btn btn-default" data-bind="visible: viewMode() === 'summaryMode', click: refresh, css: { 'btn-spinner': spinners.refresh }, disable: spinners.refresh()" title="Reload settings">
                <i class="icon-refresh"></i><span>Refresh</span>
            </button>
            <button class="btn btn-default" data-bind="visible: viewMode() === 'summaryMode', click: switchToEditMode, disable: spinners.refresh()">
                <i class="icon-edit"></i><span>Edit</span>
            </button>
        </div>
        <div class="flex-separator"></div>
        <div data-bind="visible: hasPendingValues() && viewMode() === 'summaryMode'" class="margin-right margin-right-lg" id="pendingValuesWarning">
            <span class="text-warning bg-warning padding padding-sm">
                <i class="icon-warning margin-right margin-right-sm"></i>Note: Pending values will only be in effect once the database is reloaded
            </span>
        </div>
    </div>
    <div class="flex-horizontal flex-stretch-items content-margin entries-grid" data-bind="visible: viewMode() === 'editMode'">
        <div class="flex-vertical">
            <div class="categories-list-container flex-vertical flex-grow" style="position:relative;">
                <virtual-grid class="resizable" params="controller: categoriesGridController, emptyTemplate: 'empty-categories-template'"></virtual-grid>
            </div>
        </div>
        <div class="flex-grow slidein-style">
            <div data-bind="template: { name: 'db-settings-no-matching-entries-template' }, visible: !isAnyMatchingEntries()"></div>
            <div class="panel" data-bind="visible: isAnyMatchingEntries">
                <div class="row">
                    <div class="col-md-5 text-center"><h4><strong>Configuration Key</strong></h4></div>
                    <div class="col-md-7 text-center add-vertical-split"><h4><strong>Value</strong></h4></div>
                </div>
            </div>
            <div class="scroll-stretch all-entries">
                <form class="flex-form" autocomplete="off">
                    <!-- ko foreach: allEntries -->
                        <div data-bind="template: { name: 'db-settings-basic-template' }, visible: showEntry"></div>
                    <!-- /ko -->
                </form>
            </div>
        </div>
    </div>
    <div class="flex-horizontal flex-stretch-items content-margin entries-grid" data-bind="visible: viewMode() === 'summaryMode'">
        <div class="flex-grow flex-vertical slidein-style">
            <div class="summary-list-container flex-vertical flex-grow" style="position:relative;">
                <virtual-grid class="resizable"
                              params="controller: summaryGridController, emptyTemplate: 'db-settings-no-matching-entries-template'">
                </virtual-grid>
            </div>
        </div>
    </div>
    <!-- /ko -->
</div>

<script type="text/html" id="db-settings-no-matching-entries-template">
    <div class="panel">
        <div class="panel-body">No matching entries.</div>
    </div>
</script>

<script type="text/html" id="db-settings-basic-template">
    <div class="entry-basic-template">
        <div class="panel margin-bottom margin-bottom-xs entry-content">
            <div class="panel-body row">
                <div class="col-md-5 add-border">
                    <div class="form-group">
                        <div class="margin-top margin-top-sm">
                            <small><span data-bind="text: keyName" class="margin-right margin-right-sm"></span></small>
                            <small class="description text-info"><i class="icon-info"></i></small>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 add-vertical-split">
                    <div class="form-group no-margin">
                        <div class="margin-top margin-top-sm" data-placement="right" data-toggle="tooltip" data-animation="true" 
                             data-bind="attr: { title: !hasAccess() ? 'Unauthorized to access value!' : '' }">
                            <small class="source-icon" data-placement="left" data-toggle="tooltip" data-animation="true"
                                   data-bind="attr: { title: !hasAccess() ? '' :
                                                             hasServerValue() ? 'This is a server-wide configuration' : 'This is the default configuration' }">
                                <i class="fix-icon-top" data-bind="css: { 'icon-default': !hasServerValue() }"></i>
                                <i class="fix-icon-top" data-bind="css: { 'icon-server': hasServerValue() }"></i>
                            </small>
                            <span data-bind="html: hasAccess() ? serverOrDefaultValue() || 'null' : effectiveValue()"></span>
                            <small data-placement="right" data-toggle="tooltip" data-animation="true" data-html="true"
                                   data-bind="visible: isServerWideOnlyEntry, attr: { title: hasAccess() ?
                                   'This is a server-wide entry.<br>It can be edited from the <strong>settings.json</strong> file located in your RavenDB executable folder.' :
                                   '' }">
                                <small class="margin-left margin-left-sm"><i class="icon-lock fix-icon-top"></i></small>
                            </small>
                        </div>
                    </div>
                    <div data-bind="template: { name: isServerWideOnlyEntry() ? 'db-settings-serverWide-template' : 'db-settings-override-template' }"></div>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="db-settings-serverWide-template">
    <div class="margin-top margin-bottom"></div>
</script>

<script type="text/html" id="db-settings-override-template">
    <div class="form-group no-margin margin-bottom margin-bottom-sm no-padding-right flex-vertical">
        <div class="toggle">
            <div title="Customize the database value">
                <input type="checkbox" data-bind="checked: override, attr: {'id': 'overrideToggle_' + keyName() }" />
                <label data-bind="attr: { 'for': 'overrideToggle_' + keyName() }">
                    <span>Override</span>
                </label>
            </div>
            <small class="text-warning bg-warning padding padding-xs margin-left" data-bind="visible: hasPendingContent" title="This configuration will be in effect only after reloading the database">
                <i class="icon-warning"></i><span>This configuration is pending</span>
            </small>
        </div>
        <div data-bind="collapse: override" class="override-options flex-horizontal">
            <div class="margin-right margin-right-lg flex-grow" data-bind="validationElement: customizedDatabaseValue">
                <div data-bind="visible: override, template: { name: 'db-settings-' + getTemplateType() + '-template' }"></div>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="db-settings-String-template">
    <div class="flex-horizontal">
        <div class="flex-grow" data-bind="attr: { 'title': customizedDatabaseValue }">
            <input type="text" class="form-control" placeholder="Enter a new value (or leave empty for null)"
                   data-bind="textInput: customizedDatabaseValue" />
        </div>
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
</script>

<script type="text/html" id="db-settings-Enum-template">
    <div class="flex-horizontal">
        <div class="dropdown btn-block">
            <button class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
                <span data-bind="text: customizedDatabaseValue"></span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" data-bind="foreach: availableValues">
                <li><a href="#" data-bind="text: $data, click: _.partial($parent.initCustomizedValue, $data)"></a></li>
            </ul>
        </div>
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
</script>

<script type="text/html" id="db-settings-Integer-template">
    <div class="flex-horizontal" data-bind="validationOptions: { insertMessages: false }">
        <input type="number" min="0" class="form-control" data-bind="numericInput: customizedDatabaseValue,
               attr: { placeholder: isNullable() ? 'Enter a new number (or leave empty for null)' : 'Enter a new number'}" />
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
    <span class="help-block" data-bind="validationMessage: customizedDatabaseValue"></span>
</script>

<script type="text/html" id="db-settings-Double-template">
    <div class="flex-horizontal" data-bind="validationOptions: { insertMessages: false }">
        <input type="number" min="0" class="form-control" data-bind="numericInput: customizedDatabaseValue,
               attr: { placeholder: isNullable() ? 'Enter a new number (or leave empty for null)' : 'Enter a new number'}" />
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
    <span class="help-block" data-bind="validationMessage: customizedDatabaseValue"></span>
</script>

<script type="text/html" id="db-settings-Path-template">
    <div class="flex-horizontal">
        <div class="dropdown btn-block" data-bind="validationOptions: { insertMessages: false }, validationElement: customizedDatabaseValue">
            <input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" placeholder="Enter a new path"
                   data-bind="textInput: customizedDatabaseValue, attr: {'id': 'localFolderPath_' + keyName(), 'title': customizedDatabaseValue }" />
            <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
            <ul class="dropdown-menu" data-bind="foreach: folderPathOptions, autoComplete: '#localFolderPath_' + keyName()">
                <li data-bind="click: $parent.pathHasChanged">
                    <a href="#" data-bind="text: $data"></a>
                </li>
            </ul>
        </div>
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>  
    </div>
    <span class="help-block" data-bind="validationMessage: customizedDatabaseValue"></span>
</script>

<script type="text/html" id="db-settings-Time-template">
    <div class="flex-horizontal" data-bind="validationOptions: { insertMessages: false }">
        <div class="input-group flex-grow">
            <input type="number" class="form-control" data-bind="numericInput: customizedDatabaseValue,
                   attr: { placeholder: isNullable() ? 'Enter a new time (or leave empty for null)' : 'Enter a new time', min: minValue }" />
            <div class="input-group-addon"><span data-bind="text: timeUnit"></span></div>
        </div>
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
    <span class="help-block" data-bind="validationMessage: customizedDatabaseValue"></span>
</script>

<script type="text/html" id="db-settings-Size-template">
    <div class="flex-horizontal" data-bind="validationOptions: { insertMessages: false }">
        <div class="input-group flex-grow">
            <input type="number" min="0" class="form-control" data-bind="numericInput: customizedDatabaseValue,
                   attr: { placeholder: isNullable() ? 'Enter a new size (or leave empty for null)' : 'Enter a new size' }" />
            <div class="input-group-addon"><span data-bind="text: sizeUnit"></span></div>
        </div>
        <div data-bind="template: { name: 'db-settings-default-button-template' }"></div>
    </div>
    <span class="help-block" data-bind="validationMessage: customizedDatabaseValue"></span>
</script>

<script type="text/html" id="db-settings-default-button-template">
    <div class="set-default margin-left margin-left-sm" title="Use the default value">
        <a href="#" data-bind="click: useDefaultValue"><small>Set default</small></a>
    </div>
</script>

<div class="tooltip json-preview js-summary-details-tooltip" style="opacity: 0">
</div>

<script type="text/html" id="empty-categories-template">
    No matching category
</script>
